<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- img标签 -->
     <p>
        独立像素。<img src="./img/image1.png" alt="<图片无法正确加载>" title = "这是一个美女" width = 100px height = 100px border = "10px">css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该<br/>
        设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
        也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
        些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
        <img src="image.png" alt="<图片无法正确加载>" title = "这是一个美女" weith = 100px height = 100px border = "10px">
    </p>
    <!-- 相对路径 -->
    <!-- ./xxx/xxx.png--当前文件夹下xxx文件夹内的xxx照片 -->
    <!-- xxx.png--当前文件夹内照片 -->
    <!-- ../xxx.png--当前文件夹上一级目录内文件 -->
    <!-- 绝对路径 -->
    <!-- 完整路径 -->
    <!-- alt--图片无法加载，代替图片出现文字 -->
    <!-- title--滑到图片出现文字 -->
    <!-- width--照片宽度 -->
    <!-- height--照片高度 -->
    <!-- border--照片外框大小 -->
</body>
</html>